<template>
    <div class="box-border">
        <div class="mx-auto my-[50px] max-w-[800px] min-w-[400px]">
            <section class="px-8 box-border bg-[#F8F9FF] rounded-[6px]">
                <div class="h-16 box-border border-b border-solid border-b-[#EEEEEE]">
                    <a-row style="height: 100%;" align="middle" :gutter="24">
                        <a-col :span="3">
                            <span class="text-sm text-third">头像</span>
                        </a-col>
                        <a-col :span="15">
                            <GpAvatarImg :src="userStore.userInfo?.avatar" :width="40" :height="40" class="size-10" />
                        </a-col>
                        <a-col :span="6">
                            <div class="flex flex-row gap-[10px] items-center w-full justify-end">
                                <div @click="handleClickAvatar()"
                                    class="flex flex-row justify-center hover:text-theme items-center bg-white text-sm h-8 box-border px-4 text-[#496EA9] touchable-opacity">
                                    上传
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <div class="h-16 box-border border-b border-solid border-b-[#EEEEEE]">
                    <a-row style="height: 100%;" align="middle" :gutter="24">
                        <a-col :span="3">
                            <span class="text-sm text-third">姓名</span>
                        </a-col>
                        <a-col :span="15">
                            <div class="text-primary text-sm font-medium">
                                {{ userStore.userInfo?.name }}
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div class="flex flex-row gap-[10px] items-center w-full justify-end">
                                <div @click="triggerName(userStore.userInfo?.name)"
                                    class="flex flex-row justify-center hover:text-theme items-center bg-white text-sm h-8 box-border px-4 text-[#496EA9] touchable-opacity">
                                    编辑
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <div class="h-16 box-border border-b border-solid border-b-[#EEEEEE]">
                    <a-row style="height: 100%;" align="middle" :gutter="24">
                        <a-col :span="3">
                            <span class="text-sm text-third">性别</span>
                        </a-col>
                        <a-col :span="15">
                            <div class="text-primary text-sm font-medium">
                                {{ mapGender.get(userStore.userInfo?.gender ?? EnumGender.保密) }}
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div class="flex flex-row gap-[10px] items-center w-full justify-end">
                                <div @click="triggerGender(userStore.userInfo?.gender)"
                                    class="flex flex-row justify-center hover:text-theme items-center bg-white text-sm h-8 box-border px-4 text-[#496EA9] touchable-opacity">
                                    编辑
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <div class="h-16 box-border border-b border-solid border-b-[#EEEEEE]">
                    <a-row style="height: 100%;" align="middle" :gutter="24">
                        <a-col :span="3">
                            <span class="text-sm text-third">职务</span>
                        </a-col>
                        <a-col :span="15">
                            <div class="text-primary text-sm font-medium">
                                {{ userStore.userInfo?.position }}
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div class="flex flex-row gap-[10px] items-center w-full justify-end">
                                <div @click="triggerJob(userStore.userInfo?.position)"
                                    class="flex flex-row justify-center hover:text-theme items-center bg-white text-sm h-8 box-border px-4 text-[#496EA9] touchable-opacity">
                                    编辑
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
            </section>
            <section class="px-8 box-border bg-[#F8F9FF] rounded-[6px] mt-5">
                <div class="h-16 box-border border-b border-solid border-b-[#EEEEEE]">
                    <a-row style="height: 100%;" align="middle" :gutter="24">
                        <a-col :span="3">
                            <span class="text-sm text-third">所在企业</span>
                        </a-col>
                        <a-col :span="15">
                            <div class="text-primary text-sm font-medium">
                                {{ userStore.userInfo?.currentCompanyName }}
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div class="flex flex-row gap-[10px] items-center w-full justify-end">
                                <div @click="openComapnyUnbind()"
                                    class="flex flex-row justify-center hover:text-theme items-center bg-white text-sm h-8 box-border px-4 text-[#496EA9] touchable-opacity">
                                    解绑
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <div class="h-16 box-border border-b border-solid border-b-[#EEEEEE]">
                    <a-row style="height: 100%;" align="middle" :gutter="24">
                        <a-col :span="3">
                            <span class="text-sm text-third">绑定手机</span>
                        </a-col>
                        <a-col :span="15">
                            <div class="text-primary text-sm font-medium">
                                {{ userStore.userInfo?.mobile }}
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div class="flex flex-row gap-[10px] items-center w-full justify-end">
                                <div @click="openMobile()"
                                    class="flex flex-row justify-center hover:text-theme items-center bg-white text-sm h-8 box-border px-4 text-[#496EA9] touchable-opacity">
                                    更换
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <div class="h-16 box-border border-b border-solid border-b-[#EEEEEE]">
                    <a-row style="height: 100%;" align="middle" :gutter="24">
                        <a-col :span="3">
                            <span class="text-sm text-third">账号密码</span>
                        </a-col>
                        <a-col :span="15">
                            <div class="text-primary text-sm font-medium">
                                {{ userStore.userInfo?.isPasswordSet ? '已设置，可通过账户密码登录' : '' }}
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div class="flex flex-row gap-[10px] items-center w-full justify-end">
                                <div @click="openPassword()"
                                    class="flex flex-row justify-center hover:text-theme items-center bg-white text-sm h-8 box-border px-4 text-[#496EA9] touchable-opacity">
                                    修改
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
            </section>
            <section class="mt-10">
                <div @click="appStore.openLogout()"
                    class="box-border h-[56px] bg-[#F8F9FF] flex flex-row justify-center items-center text-sm text-[#496EA9] touchable-opacity">
                    退出登录</div>
            </section>
        </div>
        <!-- 修改姓名 -->
        <a-modal v-bind="defaultModalProps" v-model:open="showName" title="编辑姓名"
            @ok="handleSubmit" :confirm-loading="formLoading"
            :body-style="{paddingBlock: '56px'}"
        >
            <Form ref="formRef" :model="formState" :rules="rules" :colon="false" hide-required-mark size="large">
                <FormItem name="name" label="姓名">
                    <a-input v-model:value="formState.name" placeholder="请输入姓名" />
                </FormItem>
            </Form>
        </a-modal>
        <!-- 修改性别 -->
        <a-modal v-bind="defaultModalProps" v-model:open="showGender" title="编辑性别"
            @ok="genderSubmit" :confirm-loading="genderLoading"
            :body-style="{paddingBlock: '56px'}"
        >
            <Form ref="genderRef" :model="genderState" :rules="genderRules" :colon="false" hide-required-mark size="large">
                <FormItem name="gender" label="性别">
                    <a-select v-model:value="genderState.gender" placeholder="请选择性别" :options="genderOptions" />
                </FormItem>
            </Form>
        </a-modal>
        <!-- 修改职务 -->
        <a-modal v-bind="defaultModalProps" v-model:open="showJob" title="编辑职务"
            @ok="jobSubmit" :confirm-loading="jobLoading"
            :body-style="{paddingBlock: '56px'}"
        >
            <Form ref="jobRef" :model="jobState" :rules="jobRules" :colon="false" hide-required-mark size="large">
                <FormItem name="position" label="职务">
                    <a-input v-model:value="jobState.position" placeholder="请输入你的职务" />
                </FormItem>
            </Form>
        </a-modal>
        <!-- 企业解绑 -->
        <a-modal v-bind="defaultModalProps" title="解绑" v-model:open="showCompanyUnbind" :width="450"
            :ok-button-props="{danger: true}" 
            @ok="handleCompanyUnbind()"
        >
            <div class="flex flex-row items-center gap-2 py-8">
                <img src="/images/info-icon.png" alt="" :width="20" :height="20" class="block size-5 object-cover select-none" />
                <span class="text-base text-primary">确认退出该企业？</span>
            </div>
        </a-modal>
        <!-- 修改手机号 -->
        <a-modal v-bind="defaultModalProps" v-model:open="showMobile" title="绑定手机" :confirm-loading="phoneLoading"
            :body-style="{paddingBlock: '32px'}"
            @ok="handlePhoneSubmit"
        >
            <Form ref="phoneRef" :model="phoneState" :rules="phoneRules" :colon="false" hide-required-mark size="large"
                :label-col="phoneLabelCol"
            >
                <FormItem name="mobile" label="新手机号">
                    <a-input v-model:value="phoneState.mobile" type="tel" placeholder="请输入新手机号" class="!text-sm text-primary"/>
                </FormItem>
                <FormItem name="code" label="验证码">
                    <a-input v-model:value="phoneState.code" placeholder="请输入验证码" class="!text-sm text-primary">
                        <template #suffix>
                            <span class="touchable-opacity text-theme" :class="running ? 'cursor-not-allowed' : ''" @click="triggerSend">
                                {{ running ? remain + 's' : '获取验证码' }}
                            </span>
                        </template>
                    </a-input>
                </FormItem>
            </Form>
        </a-modal>
        <!-- 修改密码 -->
        <a-modal v-bind="defaultModalProps" v-model:open="showPassword" title="修改密码" :confirm-loading="passLoading"
            :body-style="{paddingBlock: '32px'}"
            @ok="passSubmit"
        >
            <Form ref="passRef" :model="passState" :rules="passRules" :colon="false" hide-required-mark size="large"
                :label-col="phoneLabelCol"
                autocomplete="off"
            >
                <FormItem name="password" label="新密码" has-feedback>
                    <a-input-password v-model:value="passState.password" type="password" placeholder="5~15个字符，可用字母、数字" class="!text-sm text-primary"/>
                </FormItem>
                <FormItem name="password2" label="确认新密码" has-feedback>
                    <a-input-password v-model:value="passState.password2" type="password" placeholder="请再次输入新密码" class="!text-sm text-primary"/>
                </FormItem>
                <FormItem name="code" label="验证码" has-feedback>
                    <a-input v-model:value="passState.code" placeholder="请输入验证码" class="!text-sm text-primary">
                        <template #suffix>
                            <span class="touchable-opacity text-theme" :class="running ? 'cursor-not-allowed' : ''" @click="triggerPassCode">
                                获取验证码
                            </span>
                        </template>
                    </a-input>
                </FormItem>
            </Form>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import { Form, FormItem, message } from 'ant-design-vue';
import { useAppStore, useUserStore } from '@/stores';
import { mapGender } from '@/constants/enum-options';
import { useEditName } from './useEditName';
import { useEditGender } from './useEditGender';
import { useEditJob } from './useEditJob';
import { postMyEdituserinfo, postMyUnbindcompany } from '@/api/siderBar/my';
import { useBindPhone } from './useBindPhone';
import { useEditPassword } from './useEditPassword';
import { defaultModalProps } from '@/constants/comp-setting';
import { EnumGender } from '@/api/siderBar/model';
defineOptions({
    name: 'PersonalSettingPage'
})
definePage({
    name: 'PersonalSettingPage',
    meta: {
        text: '个人设置',
        title: '个人设置',
        isLayout: false,
        navMatchedName: "CompSettingLayout"
    }
})
const userStore = useUserStore()
const appStore = useAppStore()
const {
    formLoading,
    formRef,
    formState,
    handleSubmit,
    rules,
    showName,
    triggerName
} = useEditName(refresh)
const {
    formLoading: genderLoading,
    formRef: genderRef,
    formState: genderState,
    handleSubmit: genderSubmit,
    rules: genderRules,
    showGender,
    triggerGender,
    genderOptions
} = useEditGender(refresh)
const {
    formLoading: jobLoading,
    formRef: jobRef,
    formState: jobState,
    handleSubmit: jobSubmit,
    rules: jobRules,
    showJob,
    triggerJob
} = useEditJob(refresh)
const { state: showCompanyUnbind, on: openComapnyUnbind, off: closeCompanyUnbind } = useSwitch(false)
async function handleCompanyUnbind() {
    try {
        appStore.toggleLoading(true)
        await postMyUnbindcompany()
        closeCompanyUnbind()
        appStore.toggleLoading(false)
        message.success('解绑成功，请重新登录')
        userStore.invalidate()
        toLogin()
    } catch (error) {
        appStore.toggleLoading(false)
    }
}
async function refresh() {
    try {
        appStore.toggleLoading(true)
        await userStore.getUserInfo()
    } finally {
        appStore.toggleLoading(false)
    }
}
const {
    formLoading: phoneLoading,
    formRef: phoneRef,
    formState: phoneState,
    handleSubmit: handlePhoneSubmit,
    openMobile,
    remain,
    rules: phoneRules,
    running,
    showMobile,
    triggerSend
} = useBindPhone(refresh)
const phoneLabelCol = {
    style: {
        width: "80px"
    }
}
const {
    formLoading: passLoading,
    formRef: passRef,
    formState: passState,
    handleSubmit: passSubmit,
    openPassword,
    rules: passRules,
    showPassword,
    triggerSend: triggerPassCode
} = useEditPassword()
const { uploadAction: handleClickAvatar } = useUpload({
    async tick(info, isError) {
        if (!isError(info)) {
            await postMyEdituserinfo({
                avatar: info.fullName,
                gender: userStore.userInfo?.gender!,
                name: userStore.userInfo?.name!,
                position: userStore.userInfo?.position,
                weChat: userStore.userInfo?.weChat
            })
            message.success('头像修改成功')
            refresh()
        }
    },
    type: "image",
    crop: true,
    cropOpts: {
        width: 200,
        height: 200
    }
})
</script>